<script>
import options from 'element-ui-rw-dispatcher/options'
export default {
  name: 'ZlstDictionary',
  inject: [options.providerName],
  props: {
    rwDispatcherState: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      required: true
    },
    hideItemLabels: {
      type: String,
      default: ''
    },
    // 传入的label对应的名字
    labelKey: {
      type: String,
      default: 'itemValue'
    },
    // 传入的value对应的名字
    valueKey: {
      type: String,
      default: 'itemCode'
    },
    systemCode: {
      type: String,
      default: 'itemCode'
    }
  },
  computed: {
    dictionaryData() {
      if (this.$store.state.dictionary[this.type]) {
        return this.$store.state.dictionary[this.type].data.filter(item => !this.hideItemLabels.split(',').includes(item[this.labelKey]))
      }
      return []
    }
  },
  created() {
    this.$emit('on-before-load')
    this.$store.dispatch('dictionary/getDictionaryData', { type: this.type, systemCode: this.systemCode })
      .then((data) => {
        this.$emit('on-load-success', data)
      })
      .catch((err) => {
        this.$emit('on-error', err)
      })
  },
  methods: {
  },
  render(h) {
    if (this.rwDispatcherState !== '') {
      return (
        <div>
          <el-select-dispatcher class='inline-block widthMax' attrs={this.$attrs} on={this.$listeners}>
            {
              this.dictionaryData.map(item => (
                <el-option label={item[this.labelKey]} value={item[this.valueKey]}>
                  {
                    this.$scopedSlots.default({
                      data: item
                    })
                  }
                </el-option>
              ))
            }
          </el-select-dispatcher>
        </div>
      )
    } else {
      return (
        <div>
          <el-select class='inline-block widthMax' attrs={this.$attrs} on={this.$listeners}>
            {
              this.dictionaryData.map(item => (
                <el-option label={item[this.labelKey]} value={item[this.valueKey]}>
                  {
                    this.$scopedSlots.default({
                      data: item
                    })
                  }
                </el-option>
              ))
            }
          </el-select>
        </div>
      )
    }
  }
}
</script>
